<template>
  <div>
      <!-- 轮播图 -->
      <swiper class="swiper" :imgList="imgList"></swiper>
  
      <!-- 快速访问按钮 -->
      <ul>
        <li>
          <router-link :to="{name : 'news_list'}">
            <img src="../assets/images/menu1.png" alt="">
            <div>新闻资讯</div>
          </router-link>
        </li>
        <li>
          <router-link to="/photo/list">
            <img src="../assets/images/menu2.png" alt="">
          <div>图片分享</div>
          </router-link>
        </li>
        <li>
          <router-link to="/category">
            <img src="../assets/images/menu3.png" alt="">
          <div>商品购买</div>
          </router-link>
        </li>
        <li>
          <router-link to="/category">
           <img src="../assets/images/menu4.png" alt="">
          <div>留言反馈</div>
          </router-link>
        </li>
        <li>
          <router-link to="/category">
            <img src="../assets/images/menu5.png" alt="">
            <div>视频专区</div>
          </router-link>
        </li>
        <li>
          <router-link to="/category">
            <img src="../assets/images/menu6.png" alt="">
            <div>联系我们</div>
          </router-link>
        </li>
      </ul>

  </div>
</template>

<script>
import swiper from '../components/swiper'

export default {
  components: { swiper },
  data() {
    return {
      imgList: []
    }
  },
  created() {
    this.getImgList();
  },
  methods: {
    // 获取轮播图
    getImgList() {
      // 提示加载中
      this.$indicator.open({ text: '加载中....'})
      this.$http.get('imglist').then(res => {
        // 关闭加载中
        this.$indicator.close();
        if (res.data.code === 1) {
          this.imgList = res.data.data;
        } else {
          this.$toast('轮播图加载失败!')
        }
        // console.log(res);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
ul {
  text-align: center;
  background-color: #fff;
}
ul li {
  width: 33.3%;
  display: inline-block;
  list-style: none;
  border: 0;
  padding: 15px;
  
  img {
    width: 60px;
    height: 60px;
  }
  div {
    padding-top: 10px;
    font-size: 16px;
    color: #333;
  }
  
}
</style>